<template>
  <div id="sidebar">
    <Menu mode="horizontal">
      <template v-for="item in items">
        <template v-if="item.subNav">
          <Submenu :style="{width:100/items.length+'%'}" :name=item.uri>
            <template slot="title">
              {{item.name}}
            </template>
            <MenuItem :name=subItem.uri v-for="(subItem,i) in item.subNav">

              <a v-if="subItem.name == '编辑助手' || subItem.name == '稿件管理'" :href="subItem.uri" target="_blank">
                {{subItem.name}}
              </a>

              <router-link :to=subItem.uri v-else>
                {{subItem.name}}
              </router-link>

            </MenuItem>
          </Submenu>
        </template>
        <template v-else>
          <MenuItem :style="{width:100/items.length+'%'}" :name=item.uri>
            <router-link :to=item.uri>
              {{item.name}}
            </router-link>
          </MenuItem>
        </template>
      </template>
    </Menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        link: this.$api.url + '/navigation/list',
        items: [
          /*          {
                      "id": 1,
                      "name": "首页",
                      "num": 1,
                      "parent": -1,
                      "uri": "homePage"
                    },
                    {
                      "id": 2,
                      "name": "关于机构",
                      "num": 2,
                      "parent": -1,
                      "subNav": [
                        {
                          "id": 3,
                          "name": "机构介绍",
                          "num": 1,
                          "parent": 2,
                          "uri": "organizationIntroduce"
                        },
                        {
                          "id": 5,
                          "name": "专家顾问",
                          "num": 2,
                          "parent": 2,
                          "uri": "consultants"
                        },
                        {
                          "id": 6,
                          "name": "组织结构",
                          "num": 3,
                          "parent": 2,
                          "uri": "organizationStructure"
                        },
                        {
                          "id": 7,
                          "name": "联系方式",
                          "num": 4,
                          "parent": 2,
                          "uri": "contactWay"
                        },
                        {
                          "id": 8,
                          "name": "期刊加盟",
                          "num": 5,
                          "parent": 2,
                          "uri": "journalsJoin"
                        }
                      ],
                      "uri": "1"
                    },
                    {
                      "id": 9,
                      "name": "卫生期刊",
                      "num": 3,
                      "parent": -1,
                      "uri": "journalHygiene"
                    },
                    {
                      "id": 10,
                      "name": "论文服务",
                      "num": 4,
                      "parent": -1,
                      "subNav": [
                        {
                          "id": 11,
                          "name": "投稿流程",
                          "num": 1,
                          "parent": 10,
                          "uri": "contributeProcess"
                        },
                        {
                          "id": 12,
                          "name": "投稿指南",
                          "num": 2,
                          "parent": 10,
                          "uri": "contributeGuide"
                        },
                        {
                          "id": 13,
                          "name": "稿件评估",
                          "num": 3,
                          "parent": 10,
                          "uri": "manuscriptEvaluation"
                        },
                        {
                          "id": 14,
                          "name": "线上课程",
                          "num": 4,
                          "parent": 10,
                          "uri": "onlineCourses"
                        }
                      ],
                      "uri": "2"
                    },
                    {
                      "id": 15,
                      "name": "资讯中心",
                      "num": 5,
                      "parent": -1,
                      "subNav": [
                        {
                          "id": 16,
                          "name": "工作动态",
                          "num": 1,
                          "parent": 15,
                          "uri": "workTrend"
                        },
                        {
                          "id": 17,
                          "name": "行业动态",
                          "num": 2,
                          "parent": 15,
                          "uri": "industryDynamic"
                        },
                        {
                          "id": 18,
                          "name": "公告通知",
                          "num": 3,
                          "parent": 15,
                          "uri": "announcementNotice"
                        }
                      ],
                      "uri": "3"
                    },
                    {
                      "id": 19,
                      "name": "编辑之家",
                      "num": 6,
                      "parent": -1,
                      "subNav": [
                        {
                          "id": 20,
                          "name": "编辑活动",
                          "num": 1,
                          "parent": 19,
                          "uri": "editingActivity"
                        },
                        {
                          "id": 21,
                          "name": "文章资讯",
                          "num": 2,
                          "parent": 19,
                          "uri": "actciles"
                        },
                        {
                          "id": 22,
                          "name": "线上课程",
                          "num": 3,
                          "parent": 19,
                          "uri": "onlineCourses2"
                        }
                      ],
                      "uri": "4"
                    },
                    {
                      "id": 23,
                      "name": "优秀期刊",
                      "num": 7,
                      "parent": -1,
                      "uri": "goodJournals"
                    }*/
        ]
      }
    },
    mounted() {
      this.navigation()
    },
    methods: {
      navigation() {
        this.$axios.get(this.link).then((res) => {
          this.items = res.data.data;
        })
      }
    }
  }
</script>

<style scoped>
  a {
    color: #fff;
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  a:hover {
    color: #2b369f;
  }

  #sidebar {
    width: 100%;
  }

  #sidebar ul {
    width: 100%;
    height: 45px;
    line-height: 45px;
    list-style: none;
    font-weight: bold;
  }

  #sidebar ul li {
    font-size: 20px;
  }

  #sidebar > ul > li {
    text-align: center;
    background: #2b369f;
    color: #fff;
    padding: 0;
  }

  #sidebar > ul > li:hover, #sidebar > ul > li > div > ul > li:hover {
    background: #fff;
    color: #2b369f;
  }

  #sidebar > ul > li > div > ul > li {
    font-size: 16px !important;
    background: #2b369f;
    color: #fff;
    padding: 0;
  }

  #sidebar > ul > li > div > ul > li > a {
    padding: 8px 0;
  }
</style>
<style>
  #sidebar .ivu-select-dropdown {
    background: none;
    box-shadow: none;
  }
</style>
